<template>
	<uni-popup ref="popup" type="bottom" :is-mask-click="false">
		<view class="title flex_sbc">
			<image class="icon-size"></image>
			<view class="z-font-32">{{ goldUserInfo.type == 1 ? '评委打分' : coachInfo.userName }}</view>
			<image :src="setting.oss_pub_domain + '/app-img/gold-medal-coach/close.png'" class="icon-size" @click="close"></image>
		</view>
		<view v-if="coachInfo.workId" class="content">
			<!-- #ifdef MP-WEIXIN -->
			<video :src="setting.oss_pub_domain + coachInfo.videoUrl" class="video-class"></video>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<view v-if="coachInfo.videoUrl" class="upload-box" v-html="videoHtml"></view>
			<!-- #endif -->
			<view class="flex_sbc uni-mx-40 uni-my-32">
				<view>选手姓名：{{ coachInfo.userName }}</view>
				<view class="flex_fsc uni-color-grey">
					<view class="flex_fsc" @click="like">
						<image  :src="setting.oss_pub_domain + '/app-img/gold-medal-coach/icon_like.png'" class="icon-size-32 uni-mr-8"></image>
						<view>{{ coachInfo.likeWorkNumber || 0 }}</view>
					</view>
					<!-- #ifndef MP-WEIXIN -->
					<view class="flex_fsc uni-ml-48" @click="share">
						<image  :src="setting.oss_pub_domain + '/app-img/gold-medal-coach/icon_share_gray.png'" class="icon-size-32 uni-mr-8"></image>
						<view>{{ coachInfo.shareNumber || 0 }}</view>
					</view>
					<!-- #endif -->
				</view>
			</view>
			<bottom-box v-if="goldUserInfo.type == 1" :buts="buts" @change="clickEvent" :fixed="false"></bottom-box>
			<view style="height: 1rpx;"></view>
		</view>
	</uni-popup>
</template>

<script setup>
import { ref, getCurrentInstance, inject } from 'vue';
import { worksReview, worksShare, workLike } from '../../api/gold-medal-coach';

const popup = ref(''), { proxy: that } = getCurrentInstance();
const coachInfo = ref({}), goldUserInfo = inject('goldUserInfo');
function open(info, index) {
	info.index = index
	coachInfo.value = info;
	videoHtml.value = setVideoHtml(info.videoUrl)
	setButsData()
	popup.value.open();
	emits('popupStatus', 1)
}
function close() {
	emits('popupStatus', 0)
	popup.value.close()
}
defineExpose({ open });

const buts = ref([]);
function setButsData () {
	if (coachInfo.value.status == 1) {
		buts.value = [{
			label: '通过',
			bgColor: '#999999',
			width: 314
		}]
	} else if (coachInfo.value.status == 2) {
		buts.value = [{
			label: '不通过',
			bgColor: '#999999',
			width: 314
		}]
	} else {
		buts.value = [
			{
				label: '不通过',
				bgColor: '#E23A3A',
				width: 314
			},
			{
				label: '通过',
				bgColor: 'uni-color-main-bg',
				width: 314
			}
		]
	}
}

const emits = defineEmits(['done', 'like', 'share', 'popupStatus'])
// 按钮组件点击事件
function clickEvent(status) {
	if (coachInfo.value.status) return
	worksReview({ workId: coachInfo.value.workId, status: status ? 1 : 2 }).then(res => {
		that.tools.alert('打分完成')
		coachInfo.value.status = status ? 1 : 2 
		popup.value.close()
		emits('done', status)
	})
}

/**
 * 分享按钮点击事件
 * @param {Object} item 点击的按钮对象
 */
function share() {
	uni.share({
	    provider: 'weixin',
	    scene: "WXSceneSession",
	    type: 5,
	    imageUrl: that.setting.oss_pub_domain + coachInfo.value.videoUrl + '?x-oss-process=video/snapshot,t_1000,ar_auto',
	    title: '中国高尔夫金牌教练评选作品\n选手姓名：' + coachInfo.value.userName,
	    miniProgram: {
	        id: 'gh_6be15b82eac6',
	        path: 'pages/gold-medal-coach/index',
			webUrl: 'http://uniapp.dcloud.io'
	    },
	    success: ret => {
			worksShare({workId: coachInfo.value.workId}).then(res => {
				item.shareNumber = (item.shareNumber || 0) + 1
			})
	    }
	});
}

/**
 * 点赞或取消点赞
 * @param {Object} item 点击的按钮对象
 */
function like() {
	workLike({workId:coachInfo.value.workId}).then(res => {
		that.tools.alert('已点赞')
		coachInfo.value.isLikeWork = !coachInfo.value.isLikeWork
	})
}
const videoHtml = ref('')
function setVideoHtml(src) {
	return `<video controlslist="nodownload"	controls="controls"   src="${that.setting.oss_pub_domain + src}"   style="height:100%;width: 100%;background: #333"  poster="${`${that.setting.oss_pub_domain}${src}?x-oss-process=video/snapshot,t_1000,ar_auto`}" webkit-playsinline="" playsinline="" ></video>`
}
</script>
<script>
export default {
	name: 'Judging'
};
</script>

<style scoped>
.content {
	width: 100vw;
	background: #ffffff;
	padding-top: 40rpx;
}
.title {
	width: 100vw;
	height: 96rpx;
	background: #ffffff;
	border-radius: 24rpx 24rpx 0px 0px;
	border-bottom: 1px solid #e5e5e5;
	box-sizing: border-box;
	padding: 0 24rpx;
}

.upload-box {
	width: 670rpx;
	height: 380rpx;
	background: #f5faf9;
	border-radius: 16rpx;
	/* border: 2px dotted #008965; */
	margin: 0 40rpx 98rpx;
	overflow: hidden;
}

.video-class {
	width: 670rpx;
	height: 380rpx;
	border-radius: 16rpx;
	margin-left: 40rpx;
}
</style>
